<template>
  <div class="index-container">
    <el-row :gutter="20">
      <!-- <el-col :span="24">
        <div class="condition">
              <span class="w70 color_494949 ft12 pr5">{{translate('时间')}}：</span>
              <el-date-picker
                v-model="searchInfo2"
                :end-placeholder="translate('结束日期')"
                range-separator="to"
                :start-placeholder="translate('开始日期')"
                type="daterange"
                value-format="YYYY-MM-DD"
              />
            </div>
      </el-col> -->
      <!-- <el-col :span="12">
        <Chartdata :searchtime="searchInfo2" />
      </el-col> -->
      <!-- <el-col :span="24">
        <Chartdataout :searchtime="searchInfo2" />
      </el-col> -->
      <el-col :span="24">
        <TableList :listdonearr="ListDoneArr" :msgdonecount="MsgDoneCount" />
      </el-col>
      <!-- <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <ListSeen :listseenarr="ListSeenArr" :msgreadcount="MsgReadCount" />
      </el-col> -->
      <!-- <el-col :lg="6" :md="12" :sm="24" :xl="12" :xs="24">
        <access />
      </el-col> -->
      <!-- <el-col :lg="6" :md="12" :sm="24" :xl="12" :xs="24">
        <authorization />
      </el-col> -->
      <!-- <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <version-information />
      </el-col> -->
      <!-- <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <china-map />
      </el-col> -->
      <!-- <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <my-project />
      </el-col> -->
      <!-- <icon-list /> -->
    </el-row>
    <!-- <el-row :gutter="20">
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <ListFlow :listlowarr="ListFlowArr" :msgflowcount="MsgFlowCount" />
      </el-col>
    </el-row> -->
    <div class="flex_div slide-up-animation" :class="isShow ? 'disBlock':'disNone'">
      <div>
        <el-table :data="YJdata" style="width: 100%">
          <el-table-column
            :label="translate('预警单位')"
            prop="WHUnit"
          />
          <el-table-column
            :label="translate('物资编码')"
            prop="ItemCode"
          >
            <template #default="{ row }">
              <div>{{ row.ItemCode }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('库存数量')" prop="StockQty" />
          <el-table-column
            :label="translate('预警值')"
            prop="FZQty"
          >
            <template #default="{ row }">
              <div class="color_red">{{ row.FZQty }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="translate('保养时间')" prop="ServiceTime" />
          <el-table-column :label="translate('间隔(天)')" prop="ServiceDay" />
        </el-table>
      </div>
      <vab-icon class="close-fill" icon="close-fill" @click="closeFn" />
      <div class="more_fn" @click="more_fn">{{translate('更多')}}></div>
    </div>
  </div>
</template>

<script>
  // import PageHeader from './components/PageHeader'
  // import Chartdata from './components/chartdata'
  import Chartdataout from './components/chartdataout'
  // import Access from './components/Access'
  // import Authorization from './components/Authorization'
  import ChinaMap from './components/ChinaMap'
  import IconList from './components/IconList'
  import TableList from './components/tableList'
  import ListFlow from './components/listflow'
  import ListSeen from './components/listseen'
  import { GetTZZYStatisticsReport, getyjzmsg } from '@/api/form'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Index',
    components: {
      // PageHeader,
      TableList,
      ListFlow,
      ListSeen,
      // Chartdata,
      Chartdataout,
      /*  Plan, */
      // Access,
      // Authorization,
      // ChinaMap,
      // IconList,
    },
    data() {
      return {
        ListDoneArr: [],
        ListFlowArr: [],
        ListSeenArr: [],
        MsgDoneCount: 0,
        MsgFlowCount: 0,
        MsgReadCount: 0,
        searchInfo2: [],
        isShow: false,
        YJdata: [],
      }
    },
    created() {
      this.init()
      this.searchInfo2 = this.searchInfo2&&this.searchInfo2.length > 0 ? this.searchInfo2 : this.getTime()
      console.log(this.searchInfo2&&this.searchInfo2.length > 0)
      // this.getyjzmsgData()
    },
    methods: {
      translate(row) {
        return translate(row)
      },
      closeFn() {
        this.isShow = false
      },
      more_fn() {
        this.$router.push({
          path: '/base/itemstockSt',
        })
      },
      async init() {
  const params = {
                  pageNo: 1,
                  pageSize: 100,
                  tableName: '',
                  sort: '',
                  order: '',
                  wheres: '',
                  export: false,
                  value: '',
                  openid: ''
              }
        const data = await GetTZZYStatisticsReport(params)
        if (data.code === '200') {
          console.log(data)
          this.ListDoneArr = data.data.rows
        }
      },
      async getyjzmsgData() {
        const params = {
          pageNo: 1,
          pageSize: 5,
          total: 0,
          tableName: "",
          sort: "",
          order: "",
          wheres: "",
          export: true,
          value: "",
          openid: ""
        }
        const data = await getyjzmsg(params)
        if(data.code === '200') {
            this.YJdata = data.data.rows ? data.data.rows : []
        }
      },
      getTime() {
        // 获取Date()对象
        const date = new Date()
        // 获取当前事件的年份转为字符串
        const year = date.getFullYear().toString()
        // 获取月份，注意：月份默认从0开始，所以要+1
        const month =
          date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1).toString()
            : (date.getMonth() + 1).toString()
        // 获取天，
        const day =
          date.getDate() < 10
            ? '0' + date.getDate().toString()
            : date.getDate().toString()
        // 获取时
        const hour = date.getHours().toString()
        // 获取分
        const minute = date.getMinutes().toString()
        // 获取秒
        const second = date.getSeconds().toString()
        // 拼接时间

      // 例如：1号：00:00:00，当日：当前时间
        // 举例：2022-09-01 00:00:00   2022-09-29 13:39:29
        const begin = year + '-' + month + '-01' // 当月第一天
        const end = year + '-' + month + '-' + day // 当天
        console.log(begin)
        console.log(end)
        return [begin,end]
      },
    },
  })
</script>

<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    background: $base-color-background !important;
    .condition {
      margin-bottom: 20px;
    }
    :deep() {
      .page-header {
        margin-bottom: 20px;
      }

      .access,
      .authorization,
      .version-information {
        min-height: 268px;
        margin-bottom: 20px;
      }

      .el-card {
        .el-card__header {
          position: relative;

          .card-header-tag {
            position: absolute;
            top: 15px;
            right: $base-margin;
          }

          > div > span {
            display: flex;
            align-items: center;

            i {
              margin-right: 3px;
            }
          }
        }

        .el-card__body {
          position: relative;

          .echarts {
            width: 100%;
            height: 127px;
          }

          .card-footer-tag {
            position: absolute;
            right: $base-margin;
            bottom: 15px;
          }
        }
      }

      .bottom {
        padding-top: 20px;
        margin-top: 5px;
        color: #595959;
        text-align: left;
        border-top: 1px solid $base-border-color;
      }
    }
  }
  @keyframes slideUp {
  from {
    transform: translateY(100%); /* 从下边开始 */
    opacity: 0; /* 不可见 */
  }
  to {
    transform: translateY(0); /* 移动到原位置 */
    opacity: 1; /* 完全可见 */
  }
}

/* 应用动画到元素 */
.slide-up-animation {
  animation: slideUp 1s ease forwards; /* 动画名称，持续时间，缓动函数，填充模式 */
}
.flex_div {
    position: fixed;
    bottom: 0;
    z-index: 9999;
    right: 0;
    width: 580px;
    height: 300px;
    background: #fff;
    box-shadow: 10px 10px 10px 10px;
    border-radius: 2px;
}
.close-fill {
  position: absolute;
  top: 0;
  right:0;
  z-index: 999;
}
.more_fn {
  position: absolute;
  bottom: 0;
  right:0;
  z-index: 999;
}
.disBlock {
  display: block !important;
}
.disNone {
  display: none !important;
}
.color_red {
  color: red;
}
</style>
